<template>
  <div class="detail">
    <preview ref="preview"/>
    <nav>
      <div class="back" @click="back">
        <img src="../../../assets/img/Common/返回.svg" alt="" />
      </div>
      <div class="title">微博正文</div>
      <div class="other">...</div>
    </nav>
    <section class="contents">
      <div class="item-title">
        <img :src="detailC.avatar" alt="" @click.stop="to_uindex()" />
        <div class="uname" :style="{ color: detailC.color }">
          {{ detailC.nickname }}
        </div>
      </div>
      <div class="content" :style="{ color: detailC.color }" v-html="EmojiHandle(detailC.message)">
      </div>
      <div class="show-img">
        <div class="show-img-item" v-for="img in detailC.img" @click.stop="preview(detailC.img)">
          <img :src="img" alt="" />
        </div>
      </div>
    </section>
    <section class="comments">
      <div class="top">
        <div class="f-left">评论 {{counta}}</div>
        <div class="f-right">赞 {{countb}}</div>
      </div>
      <div class="middle">
        <div class="com-item" v-for="(com,index) in coms ">
          <div class="img">
           <img :src="com.user.avatar" alt="" />
          </div>
          <div class="text">
            <div class="com-name">{{com.user.nickname}}</div>
            <div class="com-msg">{{com.com}}</div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <img src="../../../assets/img/square/表情2.svg" alt="" />
      <textarea name="" v-model="talk"></textarea>
      <img src="../../../assets/img/square/发送.svg" @click="send" alt="" />
    </footer>
  </div>
</template>

<script>
import {emojis} from '../../../common/emoji'
import Preview from '../../../components/Preview/Preview.vue';
export default {
  components: { Preview },
  name: "Comment",
  data() {
    return {
      detailC: {},
      talk: ""
    };
  },
  computed: {
   coms(){
    return this.detailC.coms || ''
   },
   userInfo(){
    return this.$store.getters.user ||''
   },
    _id() {
      //用户id
      return this.$store.getters.user._id ||'';
    },
    cid() {
      //当前话题的id
      return this.$route.params.cid ||'';
    },
    countb(){
     return this.detailC.great?this.detailC.great.length:0
    },
    counta(){
     return this.coms&&this.coms.length
    }
  },
  created() {
   this.initDetailC();
    this.$emit("hide");
    console.log('话题细节被创建')
  },
  methods: {
    initDetailC() {
      this.$axios({
        url: "/square",
        params: {
          cid: this.cid
        }
      }).then(res => {
        this.detailC = res.data;
      });
    },
    send() {
     let user = {
       uid:this.userInfo._id,
       nickname:this.userInfo.nickname,
       avatar:this.userInfo.avatar,
     }
      let data = {
        com: this.talk,
        cid: this.cid,
        user:user
      };
      this.detailC.coms.push(data)
      this.$axios({
        url: "/square/talk/",
        method: "post",
        data: data
      }).then(res => {
       this.talk = ''
        console.log(res);
      });
    },
    back(){
     this.$router.go(-1)
    },
    to_uindex(){
       let uid = this.detailC.uid
       this.$router.push('/uindex/' + uid)
    },
      preview(img){
        this.$refs.preview.show(img)
    },
    //表情处理函数
    EmojiHandle(msg) {
      console.log(msg);
      let reg = /\[(.*?)\]/g;
      let text = msg.match(reg);
      console.log(text);
      if (text) {
        text.forEach(e => {
          let file = emojis.filter(item => {
            if (item.mark == e) {
              return item.file;
            }
          });
        msg = this.replaceCode(file,msg)
        });
      return msg
        // return msg = msg
      }else{
        return msg
      }
    },
    replaceCode(emojis,content){
      console.log(emojis,content)
      let newContent = ''
      if(emojis==[]){
        return msg
      }
      for(let i = 0; i < emojis.length; i++){
        newContent = content.replace(emojis[i].mark,`<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${emojis[i].file}" >`)
        console.log(newContent)
        // emojisArr.shift()
        // console.log(emojisArr)
        // return this.replaceCode(emojisArr,newContent) 
      }
      return newContent
    },
  },
  beforeDestroy(){
    this.$emit("show");
  }

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.detail {
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 50px;
}
nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  z-index: 3;
  line-height: 44px;
  text-align: center;
  display: flex;
  background-color: #eee;
}
.bakc,
.other {
  width: 50px;
}
.back {
  margin-top: 5px;
  margin-left: 10px;
}
.title {
  flex: 1;
}
.contents {
  padding: 0 10px;
}
.item-title {
  /* line-height: 45px; */
  padding: 10px 5px;
  display: flex;
}
.item-title img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.uname {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 14px;
  margin-left: 5px;
  margin-top: 5px;
}
.content {
  padding:0 10px 0 10px;
  white-space: normal;
  word-break: break-all;
}
.show-img {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  margin-top: 10px;
  width: 100%;
}
.show-img-item {
  overflow: hidden;
  margin-left: 5px;
  width: 110px;
  height: 110px;
  border-radius: 10px;
  /* flex: 1; */
  /* width: 100%; */
  /* height: 100px; */
}
.show-img img {
  width: 100%;
  /* height: 100%; */
  border-radius: 10px;
}
.comments {
  padding: 0 10px;
}
.top {
  height: 40px;
  line-height: 40px;
  border-bottom: 0.5px solid rgb(214, 212, 212);
}
.com-item {
  display: flex;
  padding: 20px 0;
 border-bottom: rgb(197, 196, 196) 1px solid;
}
.img{
 width: 40px;
 height: 40px;
}
.img img{
 width: 100%;
 height: 100%;
 border-radius: 50%;
}
.com-name{
 font-size: 12px;
 color: #666;
}
.com-msg{
 margin-top: 10px;
}
.text {
  margin-left: 10px;
}
footer {
  background-color: #fff;
  padding: 0 5px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
footer textarea {
  resize: none;
  height: 40px;
  width: 75%;
  padding: 5px;
  background-color: rgb(223, 222, 222);
  border: 0;
  font-size: 16px;
}
.f-left {
  float: left;
}
.f-right {
  float: right;
}
</style>
